<template>
    <el-dropdown  @command="handleCommand">
        <div class="my-dropdown-head">
            <el-image 
                style="width: 2vw; height: 2vw; box-sizing: border-box; border-radius: 50%;" 
                :src="avatarImage" 
                fit="fill" 
            />
            <div style="padding: 0 0.2vw">admin</div>
            <el-icon 
                size="16"
                class="my-tarn-icon"
            >
                <ArrowDown />
            </el-icon>
        </div>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item 
                    v-for="(item, index) in formData"
                    :key="'1-' + index"
                    divided
                    :command="item.command"
                >
                    <div style="display: flex; align-items: center;">
                        <el-icon 
                            size="16"
                        >
                            <!-- <CircleClose /> -->
                            <component :is="item.currentIcon" />
                        </el-icon>
                        <div>{{ item.name }}</div>
                    </div>
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import {
        CircleClose,
        ArrowDown,
        User,
        SwitchButton,
    } from '@element-plus/icons-vue'
    // const props = withDefaults(defineProps<{
    //     modelValue?: boolean,
    // }>(), {
    //     modelValue: false,
    // })
    // const { modelValue = false } = defineProps<{
    //     modelValue?: boolean,
    // }>()
    // const emits = defineEmits<{
    //     (e: 'update:modelValue', data: boolean): void,
    // }>()
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
	const avatarImage = new URL('@/assets/img/avatar/avatar.png', import.meta.url).href

    const formData: Raw<any> = markRaw([
        {
            command: 'https://www.baidu.com',
            currentIcon: User,
            name: '个人中心'
        },
        {
            command: '/login',
            currentIcon: SwitchButton,
            name: '退出登录'
        }
    ])

    const handleCommand = (command: any) => {
        console.log(command)
        if (command == '/login') {
            // 清除登录信息
            store.openid = ''
            router.replace('/login')
        }
    }

</script>

<style lang="scss" scoped>
    // .homeSearchDialog::after {
    //     content: '';
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     z-index: -1;
    //     width: 100vw;
    //     height: 100vh;
    //     background-image: url('@/assets/avatar/bg8.png');
    //     background-size: 100% 100%;
    //     filter: blur(5px);
    // }
    // .homeSearchDialog {
    //     width: 100vw;
    //     height: 100vh;
    //     overflow: hidden;
    // }
    .el-menu-vertical {
        width: 300px;
        height: 100%;
    }
    .my-icon {
        @include my-home-head-icon;
    }
    .my-dropdown-head {
        display: flex; 
        align-items: center; 
        cursor: pointer;
    }
    .my-tarn-icon {
        transition: transform 200ms linear 0s;
    }
    .my-dropdown-head:hover .my-tarn-icon {
        transform: rotate(180deg)
    }
</style>